<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>
        /*#div1{*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*border: 1px solid #000000;*/
            /*display: none;*/
        /*}*/

    </style>
</head>
<body>

<div id="div1">
    <button class="active">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <div style="display: block;">1111</div>
    <div style="display: none;">2222</div>
    <div style="display: none;">3333</div>
</div>


</body>
</html>
<script>
    var odiv,abtn,adiv
    window.onload = function () {
        odiv = document.querySelector("#div1")
        abtn = odiv.querySelectorAll("button")
        adiv = odiv.querySelectorAll("div")

        init()

    }

    //初始化函数
    function init() {
        for(var i=0;i<abtn.length;i++){
            abtn[i].index = i;
            abtn[i].onclick = changeTab;
        }
    }

    function changeTab() {
        for(var i=0;i<abtn.length;i++){
            abtn[i].className = "";
            adiv[i].style.display = "none"
        }
        this.className = "active";
        adiv[this.index].style.display = "block"
    }
</script>